import React, {useState, useEffect} from 'react';
import { Input } from 'antd';
import { Button } from 'antd';
import { Checkbox } from 'antd';
import { AudioOutlined } from '@ant-design/icons';

export default function TodoAntdContainer() {
    const [todos, setTodos] = useState([]);
    const [todo, setTodo] = useState();
    const [id, setId] = useState(1);

    function addTodo() {
        const value = {id:id, title:todo, completed:false}
        todos.push(value);
        setTodos(todos)
        const newId = id + 1;
        setId(newId);
        setTodo();
    }

    function onChange(t,e) {
         const newTodos = todos.map(td => {
             if(td.id === t.id) {
                 return {...td, completed:!td.completed};
             }
             return td;
         })
         setTodos(newTodos);
    }

    return (
        <>
        <div>
            <Input placeholder="输入待完成" style={{ width: 400 }} value={todo} onChange={(ev) => setTodo(ev.target.value)} />
            <Button type="primary" onClick={addTodo} >Add</Button>
        </div>
    <br />
    <br />
    <div>
        <ul>
            {
                todos.map(t => (
                    <li key={t.id}>
                        <Checkbox onChange={(ev) => onChange(t, ev)} style={{color:'white', fontSize:18}}>{t.title} {t.completed? '已完成':'未完成'}</Checkbox>
                    </li>
                ))
            }
        </ul>
    </div>
    </>
    )

}